<template>
	<div class="product-check">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addCheck">新增检验单</el-button>
				<el-select v-model="searchResult" placeholder="筛选检测结果" style="width: 180px" clearable>
					<el-option label="合格" value="合格" />
					<el-option label="不合格" value="不合格" />
				</el-select>
				<el-input v-model="searchProduct" placeholder="搜索产品名称" style="width: 200px; margin-left: 10px"
					clearable />
			</div>

			<el-table :data="filteredChecks" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="checkId" label="检验单编码" sortable></el-table-column>
				<el-table-column prop="checkName" label="检验单名称" sortable></el-table-column>
				<el-table-column prop="productName" label="产品名称" sortable></el-table-column>
				<el-table-column prop="checkResult" label="检测结果" sortable>
					<template #default="scope">
						<el-tag :type="scope.row.checkResult === '合格' ? 'success' : 'danger'">{{ scope.row.checkResult
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="batchNo" label="批次号" sortable></el-table-column>
				<el-table-column prop="checkDate" label="检测日期" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template #default="scope">
						<el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
						<el-button size="small" type="primary" @click="editCheck(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteCheck(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="检验单信息" width="600px">
			<el-form :model="currentCheck" label-width="120px">
				<el-form-item label="检验单编码">
					<el-input v-model="currentCheck.checkId" />
				</el-form-item>
				<el-form-item label="检验单名称">
					<el-input v-model="currentCheck.checkName" />
				</el-form-item>
				<el-form-item label="产品编码">
					<el-input v-model="currentCheck.productCode" />
				</el-form-item>
				<el-form-item label="产品名称">
					<el-input v-model="currentCheck.productName" />
				</el-form-item>
				<el-form-item label="客户编号">
					<el-input v-model="currentCheck.customerId" />
				</el-form-item>
				<el-form-item label="客户名称">
					<el-input v-model="currentCheck.customerName" />
				</el-form-item>
				<el-form-item label="批次号">
					<el-input v-model="currentCheck.batchNo" />
				</el-form-item>
				<el-form-item label="发货数量">
					<el-input-number v-model="currentCheck.deliveryQuantity" :min="1" />
				</el-form-item>
				<el-form-item label="检测数量">
					<el-input-number v-model="currentCheck.checkQuantity" :min="1" />
				</el-form-item>
				<el-form-item label="不合格数量">
					<el-input-number v-model="currentCheck.unqualifiedQuantity" :min="0" />
				</el-form-item>
				<el-form-item label="出货日期">
					<el-date-picker v-model="currentCheck.deliveryDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="检测日期">
					<el-date-picker v-model="currentCheck.checkDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="检测结果">
					<el-select v-model="currentCheck.checkResult">
						<el-option label="合格" value="合格" />
						<el-option label="不合格" value="不合格" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveCheck">保存</el-button>
			</template>
		</el-dialog>

		<!-- 详情弹窗 -->
		<el-dialog v-model="detailVisible" title="检验单详情" width="600px">
			<el-descriptions :column="2" border>
				<el-descriptions-item label="检验单编码">{{ currentCheck.checkId }}</el-descriptions-item>
				<el-descriptions-item label="检验单名称">{{ currentCheck.checkName }}</el-descriptions-item>
				<el-descriptions-item label="产品编码">{{ currentCheck.productCode }}</el-descriptions-item>
				<el-descriptions-item label="产品名称">{{ currentCheck.productName }}</el-descriptions-item>
				<el-descriptions-item label="客户编号">{{ currentCheck.customerId }}</el-descriptions-item>
				<el-descriptions-item label="客户名称">{{ currentCheck.customerName }}</el-descriptions-item>
				<el-descriptions-item label="批次号">{{ currentCheck.batchNo }}</el-descriptions-item>
				<el-descriptions-item label="发货数量">{{ currentCheck.deliveryQuantity }}</el-descriptions-item>
				<el-descriptions-item label="检测数量">{{ currentCheck.checkQuantity }}</el-descriptions-item>
				<el-descriptions-item label="不合格数量">{{ currentCheck.unqualifiedQuantity }}</el-descriptions-item>
				<el-descriptions-item label="出货日期">{{ currentCheck.deliveryDate }}</el-descriptions-item>
				<el-descriptions-item label="检测日期">{{ currentCheck.checkDate }}</el-descriptions-item>
				<el-descriptions-item label="检测结果">{{ currentCheck.checkResult }}</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<el-button @click="detailVisible = false">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const checks = ref([
	{ checkId: 'CHK202405001', checkName: '阿莫西林检验单', productCode: 'MED1001', productName: '阿莫西林胶囊', customerId: 'CUST001', customerName: '健康药业', batchNo: 'BATCH001', deliveryQuantity: 100, checkQuantity: 10, unqualifiedQuantity: 0, deliveryDate: '2024-06-01', checkDate: '2024-06-02', checkResult: '合格' },
	{ checkId: 'CHK202405002', checkName: '布洛芬检验单', productCode: 'MED1002', productName: '布洛芬片', customerId: 'CUST002', customerName: '仁和药业', batchNo: 'BATCH002', deliveryQuantity: 150, checkQuantity: 15, unqualifiedQuantity: 1, deliveryDate: '2024-06-05', checkDate: '2024-06-06', checkResult: '不合格' },
])

for (let i = 3; i <= 15; i++) {
	checks.value.push({
		checkId: `CHK2024050${i}`,
		checkName: `产品${i}检验单`,
		productCode: `MED10${i}`,
		productName: `产品${i}`,
		customerId: `CUST00${i}`,
		customerName: `客户${i}`,
		batchNo: `BATCH00${i}`,
		deliveryQuantity: 100 + i * 10,
		checkQuantity: 10 + i,
		unqualifiedQuantity: i % 3 === 0 ? 2 : 0,
		deliveryDate: `2024-06-${10 + i}`,
		checkDate: `2024-06-${11 + i}`,
		checkResult: i % 3 === 0 ? '不合格' : '合格'
	})
}

const searchResult = ref('')
const searchProduct = ref('')
const dialogVisible = ref(false)
const detailVisible = ref(false)
const currentCheck = ref({})

// 筛选
const filteredChecks = computed(() =>
	checks.value.filter(c =>
		(!searchResult.value || c.checkResult === searchResult.value) &&
		(!searchProduct.value || c.productName.includes(searchProduct.value))
	)
)

// 新增检验单
const addCheck = () => {
	currentCheck.value = { checkId: '', checkName: '', productCode: '', productName: '', customerId: '', customerName: '', batchNo: '', deliveryQuantity: 1, checkQuantity: 1, unqualifiedQuantity: 0, deliveryDate: '', checkDate: '', checkResult: '' }
	dialogVisible.value = true
}

// 编辑检验单
const editCheck = (row) => {
	currentCheck.value = { ...row }
	dialogVisible.value = true
}

// 保存检验单
const saveCheck = () => {
	if (!currentCheck.value.checkId || !currentCheck.value.checkName) {
		ElMessage.error('检验单编码和检验单名称不能为空')
		return
	}
	const index = checks.value.findIndex(c => c.checkId === currentCheck.value.checkId)
	if (index >= 0) {
		checks.value[index] = { ...currentCheck.value }
		ElMessage.success('检验单已更新')
	} else {
		checks.value.push({ ...currentCheck.value })
		ElMessage.success('检验单已新增')
	}
	dialogVisible.value = false
}

// 删除检验单
const deleteCheck = (row) => {
	ElMessageBox.confirm('确认删除该检验单吗？', '提示', { type: 'warning' })
		.then(() => {
			checks.value = checks.value.filter(c => c.checkId !== row.checkId)
			ElMessage.success('检验单已删除')
		})
		.catch(() => { })
}

// 查看详情
const viewDetail = (row) => {
	currentCheck.value = { ...row }
	detailVisible.value = true
}
</script>

<style scoped>
.product-check .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
